<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <link rel="icon" type="image/png" sizes="144x144" th:href="@{../static/image/icon.ico}"/>
    <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}"  media="all">
</head>
<style>
html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}

body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    background:url('../static/image/background.png') repeat;
}
.container{
    width: 420px;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    position: absolute;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 20px;
    z-index: 130;
    border-radius: 8px;
    box-shadow: 11px 6px 18px 11px rgba(206, 184, 135, 1);
    font-size: 16px;
}
.layui-input{
    border-radius: 5px;
    width: 300px;
    height: 40px;
}
.layui-form-item{
    margin-left: -20px;
}
.layui-btn{
    margin-left: 0px;
    border-radius: 5px;
    width: 142px;
    height: 40px;
    font-size: 15px;
}
.font-set{
    font-size: 13px;
    text-decoration: none;
    margin-left: 120px;
}
.title{
     font-size: 20px;
     color:#fff;
     margin-left:40%;
}
.layui-form-label{
    color:#fff;
}
</style>
<body>
    <div class="container">
        <div class="layui-form-item">
                <span class="title">注册账户</span>
        </div>
        <form class="layui-form"  method="post" >
			 <div class="layui-form-item">
			   <label class="layui-form-label">账户</label>
			   <div class="layui-input-block">
			     <input type="text" name="username" required  lay-verify="username" placeholder="请输入账户名" autocomplete="off" class="layui-input">
			   </div>
			 </div>
			 <div class="layui-form-item">
			   <label class="layui-form-label">邮箱</label>
			   <div class="layui-input-block">
			     <input type="text" name="email" id=email required  lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
			   </div>
			 </div>
			 <div class="layui-form-item">
			   <label class="layui-form-label">密码</label>
			   <div class="layui-input-inline">
			     <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
			   </div>
<!-- 			   <div class="layui-form-mid layui-word-aux">设置密码</div> -->
			 </div>
			 <div class="layui-form-item">
			   <div class="layui-input-block">
			     <button class="layui-btn" lay-submit lay-filter="registerSubmit" >立即提交</button>
			     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			   </div>
			 </div>
		</form>
    </div>
<script th:src="@{../static/layui/layui.js}" charset="utf-8"></script>
<script>
layui.use('form', function(){
	  var $ = layui.jquery;
	  var form = layui.form;
	  form.render(); 
	  //自定义验证规则
	  form.verify({
			username: function(value,item) {
				if(value.length==0){
					return "账户名不能为空";
				}
		        var message = "";
		        $.ajax({
		            async: false,
		            type: "post",
		            url: "/usernameCheck.html",
		            data: {
		                username: value
		            },
		            success: function(result) {
		            	if (result.code == 500) {
		                   message ="账户名已被占用，请重新填写";
		            	}
		            }
		        });
		        return message;
	
		    },
		    email: function(value, item) {
		        var emailVerify = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
		        if (!emailVerify.test(value)) {
		            return '邮箱格式必须合法';
		        }
		        var message = "";
		        $.ajax({
		            async: false,
		            type: "post",
		            url: "/emailCheck.html",
		            data: {
		                email: value
		            },
		            success: function(result) {
		                if (result.code == 500) {
		                   message = result.message;
		                }
		            }
		        });
		        return message;
		    },
		    password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
		});
		//监听提交
		form.on('submit(registerSubmit)', function(data){
			  $.ajax({
				  async: false,
				  url:"/registerSubmit.html",
				  type:"POST",
			  	  data:data.field,
			  	  success:function(result){
			  		  if(result.code==200){
			  			     layer.alert('账号注册成功，请登录邮箱激活该账号后使用', {icon: 1,}, function(){
				  			   window.location.href="/";
							});
			  		  }else{
			  			layer.alert('账号注册失败，请联系管理员', {icon: 2,}, function(){
				  			   window.location.href="/register.html";
							});
			  		  }
			  	   }
			    })
		    	return false;
		  });
		  
		});
</script>
</body>
</html>